<!--
 * new page
 * @author: zhuangming
 * @since: 2025-03-05
 * tabActive.vue
-->
<template>
  <view
    v-if="activeData && activeData.length"
    style="
      background-image: url('https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/21/bg_bg_20250321154307A003.png');
      background-size: cover;
      padding-top: 86rpx;
      width: 95%;
      height: 40%;
      margin: 0 auto;
    "
  >
    <view class="cf bgf pd-2 mgb-2 active-detail border-radius" v-for="(item, index) of activeData" :key="index">
      <view @click="handleLink(item.id, item)" style="margin: 0 auto; background-color: #ffffff; padding: 10rpx; display: flex; align-items: center">
        <image style="width: 141rpx; height: 141rpx; margin: 10px; border-radius: 10rpx" :src="imgurl + item.icon"> </image>
        <view style="width: calc(100% - 180rpx)">
          <view style="display: flex; justify-content: space-between; align-items: flex-start">
            <p>{{ item.name }}</p>
            <button open-type="share" :data-item="item" class="share-icon" @click.stop="shareClick">
              <image src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/09/28/分享 (1)_20250928092009A001.png" style="width: 36rpx; height: 36rpx"> </image>
            </button>
          </view>
          <view style="display: flex; align-items: center; justify-content: space-between; margin-top: 10rpx">
            <view class="">
              <p style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #808080; line-height: 33rpx; text-align: left; font-style: normal">
                已售{{ item.soldNum }}
              </p>
              <p style="margin-top: 10px" v-if="item.price > 0">
                <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #f86315; line-height: 33rpx; text-align: left; font-style: normal">抢购价</span>
                <span style="font-family: DIN, DIN; font-weight: bold; font-size: 32rpx; color: #f86316; line-height: 39rpx; text-align: left; font-style: normal">￥{{ item.price }}</span>
              </p>
            </view>
            <view style="display: flex; align-items: end" class="dib pd tar dis-f align-end" v-if="item.price > 0 && seeButton">
              <view class="">
                <button
                  style="
                    height: 52rpx;
                    background: linear-gradient(90deg, #ff5e0b 0%, #ff7c02 100%);
                    border-radius: 26rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #ffffff;
                    line-height: 37rpx;
                    text-align: left;
                    font-style: normal;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  抢购
                </button>
              </view>
            </view>
            <view style="display: flex; align-items: end" class="dib pd tar dis-f align-end" v-else>
              <view class="">
                <button
                  style="
                    height: 52rpx;
                    background: linear-gradient(90deg, #ff7c02 0%, #ff5e0b 100%);
                    border-radius: 26rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #ffffff;
                    line-height: 37rpx;
                    text-align: left;
                    font-style: normal;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                  "
                >
                  详情
                </button>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view v-else style="text-align: center; padding: 10px; display: flex; flex-direction: column; align-items: center">
    <image class="" mode="aspectFit" src="https://www.wantongkonggu.cn/crmebimage/profile/upload/2025/03/25/zwsj_20250325090754A001.png"> </image>
    <span style="font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #a8a8a8; line-height: 40rpx; text-align: center; font-style: normal">暂无活动</span>
  </view>
</template>

<script>
import { IMG_URL } from "../../../config/index";
import { getUserInfo, programlogin } from "../../../utils/request_api.js"; /* 登录界面挪动接口 */
import { notBindingPhone } from "../../../utils/api/api.js";
export default {
  data() {
    return {
      imgurl: IMG_URL,
      userInfo: {},
      openIdadw: "",
      authKey: "",
    };
  },

  props: {
    yaoiqngID: {
      type: String,
      default: "",
    },
    userType: {
      type: String,
      default: "",
    },
    seeButton: {
      type: Boolean,
      default: "",
    },

    activeData: {
      type: Array,
      default: () => [],
    },
    /** 商户id */
    businessId: {
      type: String,
      default: "",
    },
    shareMerIdBack: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
  },
  methods: {
    initUser() {
      uni.showLoading();
      getUserInfo()
        .then((res) => {
          if (res.code === 401) {
            this.showloginJs();
          } else {
            this.userInfo = res.data;
            uni.setStorageSync("userInfo", res.data);

            this.aaaa = true;
            uni.hideLoading();
            this.showzhezhao = false;
          }
        })
        .catch((err) => {
          console.error("获取用户信息失败", err);
          uni.hideLoading();
        });
    },
    showloginJs() {
      let that = this;
      uni.login({
        provider: "weixin",
        success: (res) => {
          if (res.code) {
            that.autoLogin(res.code);
          } else {
            uni.hideLoading();
            console.error("登录失败:", res.errMsg);
            uni.showToast({
              title: "微信登录失败，请稍后再试",
              icon: "none",
            });
          }
        },
        fail: (err) => {
          console.error("登录失败:", err);
          uni.showToast({
            title: "微信登录失败，请稍后再试",
            icon: "none",
          });
        },
      });
    },
    /* 免登录-每个界面调用 */
    async autoLogin(code) {
      let that = this;
      wx.getUserInfo({
        success(res) {
          const { nickName, avatarUrl, gender } = res.userInfo;
          programlogin({ code, avatar: avatarUrl, nickName, sex: gender }).then((response) => {
            const data = response.data;
            console.log("🚀 ~ programlogin ~ data:", data);
            that.authKey = data.key;
            that.openIdadw = data.openId;
            if (data.type === "login") {
              uni.setStorageSync("uid", data.uid);
              uni.setStorageSync("token", data.token);
              uni.setStorageSync("userInfo_data", data);
              uni.setStorageSync("openID", data.key);
              that.initUser();
              uni.hideLoading();
            } else {
              that.initUserregister();
            }
          });
        },
        fail: () => {
          uni.showToast({
            title: "您需要授权，才能获取您的信息！",
          });
        },
      });
    },
    initUserregister() {
      var params = {
        key: this.authKey,
        type: "routine",
        openId: this.openIdadw,
        phone: "",
        password: "",
        captcha: "",
        codeOrPassword: "3",
        inviterLinkId: this.id ? this.id : "",
        inviteeType: this.type || "",
      };
      notBindingPhone(params).then((res) => {
        uni.hideLoading();
        if (res.code == 200) {
          const data = res.data;
          uni.setStorageSync("uid", data.uid);
          uni.setStorageSync("token", data.token);
          uni.setStorageSync("userInfo_data", data);
          uni.setStorageSync("openID", this.authKey);
          this.initUser();
        }
      });
    },
    shareClick() {},
    async handleLink(id, item) {
      var e = await getUserInfo();
      if (e.code == 401) {
        uni.showLoading();
        this.showloginJs();
      } else {
        uni.navigateTo({
          url:
            "/pages_h5/local_life/detailIndex?id=" +
            id +
            "&businessId=" +
            this.businessId +
            "&isLaundry=" +
            item.isLaundry +
            "&userType=" +
            this.userType +
            "&yaoiqngID=" +
            this.yaoiqngID +
            "&isWatercard=" +
            item.isWatercard,
        });
      }
    },
    async xiangqing(id, item) {
      var e = await getUserInfo();
      if (e.code == 401) {
        uni.showLoading();
        this.showloginJs();
      } else {
        uni.navigateTo({
          url:
            "/pages_h5/local_life/detailIndex?id=" +
            id +
            "&businessId=" +
            this.businessId +
            "&isLaundry=" +
            item.isLaundry +
            "&iddd=" +
            this.iddd +
            "&userType=" +
            this.userType +
            "&yaoiqngID=" +
            this.yaoiqngID,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.active-detail {
  .active-detail-title {
    font-weight: 500;
  }

  .active-detail-price {
    font-family: DIN, DIN;
    font-weight: bold;
    color: #f86315;
  }

  .active-detail-btn {
    min-width: 136rpx;
    height: 64rpx;
  }

  .active-detail-contnet {
    width: calc(100% - 180rpx);
  }

  .share-icon {
    margin: 0;
    /* height: 42px ; */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    border: none !important;
    flex: none;
  }
  .share-icon::after {
    border: none;
  }
}
</style>
